<template>
  <div class="record-detail pd30">
    <el-dialog :visible.sync="visible">
      <div class="panelWrap detail-container">
        <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
          <div>维保公司备案</div>
          <i class="el-icon-close" @click="handleCloseDialog" />
        </div>
        <div class="con flex">
          <div class="conLeft">
            <div class="con-content flex flexac">
              <span class="name texttr">单位名称：</span>
              <el-input v-model="form.name" readonly class="input co-detail" />
            </div>
            <div class="con-content flex flexac">
              <span class="name texttr">统一社会信用代码：</span>
              <el-input v-model="form.socialCreditCode" readonly class="input co-detail" />
            </div>
            <div class="con-content flex flexac">
              <span class="name texttr">应急救援电话：</span>
              <el-input v-model="form.rescuePhone" readonly class="input co-detail" />
            </div>
            <div class="con-content flex flexac">
              <span class="name texttr">主要负责人：</span>
              <el-input v-model="form.chargePerson" readonly class="input co-detail" />
            </div>
            <div class="con-content flex flexac">
              <span class="name texttr">坐标：</span>
              <el-input class="input co-detail" :value="`${form.longitude}，${form.latitude}`" readonly />
            <!-- <el-button class="locationBtn locaBtn el-icon-location-information" @click="choiceCoordinate=true">定位</el-button> -->
            </div>
            <div class="con-content flex flexac">
              <span class="name texttr">注册地址：</span>
              <el-input v-model="form.address" readonly class="input co-detail" />
            </div>
            <div class="con-content flex flexac">
              <span class="name texttr">办公地址：</span>
              <el-input v-model="form.officeAddress" readonly class="input co-detail" />
            </div>
            <div class="con-content wd100 flex ">
              <span class="name texttr">公司介绍：</span>
              <el-input
                v-model="form.introduce"
                class="markinfo"
                :autosize="{ minRows: 4, maxRows: 5}"
                resize="none"
                type="textarea"
                readonly
              />
            </div>
            <div class="con-content flex flexac">
              <span class="name texttr"><span class="mustval">*</span>是否通过审核：</span>
              <el-select v-model="approvalValue" class="app-select co-detail" placeholder="请选择审批状态">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>

            <div v-if="approvalValue === '2'" class="con-content wd100 flex">
              <span class="name texttr"><span class="mustval">*</span>备注：</span>
              <el-input
                v-model="reviewOpinions"
                class="markinfo"
                :autosize="{ minRows: 4, maxRows: 5}"
                resize="none"
                type="textarea"
                placeholder="请输入不通过原因..."
              />
            </div>
          </div>
          <div class="divider m-t-10" />
          <div class="conRight">
            <div class="uploadwrap">
              <el-divider>相关证书及申请表</el-divider>
              <div class="row flex sanzhengImg">
                <div class="uploadDetails">
                  <div class="flex flexdc imagebox">
                    <div class="uploadDetails-title">营业执照扫描件</div>
                    <el-image
                      v-loading="loading"
                      class="re-image"
                      lazy
                      element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(0, 0, 0, 0.8)"
                      :src="form.businImage"
                    />
                  <!-- <uploadImg imgtype="businessLicensePicFile" :pic-url="businessLicensePicIdBase64" @sendImginfo="handleImginfo" /> -->
                  </div>
                </div>
                <div class="uploadDetails">
                  <div class="flex flexdc imagebox">
                    <div class="uploadDetails-title pre">备案申请表扫描件
                    <!-- <div class="downTem m-l-10"><span class="iconfont icon-xiazai" />申请表模板下载</div> -->
                    </div>
                    <el-image
                      v-loading="loading"
                      class="re-image"
                      lazy
                      element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(0, 0, 0, 0.8)"
                      :src="form.applyImage"
                    />
                  <!-- <uploadImg imgtype="applyTemplateFile" :pic-url="applyTemplateFileIdBase64" @sendImginfo="handleImginfo" /> -->
                  </div>
                </div>
              </div>
              <div class="right-divider m-t-10">&nbsp;&nbsp;&nbsp;特种设备生产许可证或安装改造维修许可证扫描件&nbsp;&nbsp;&nbsp;</div>
              <div class="row flex">
                <div class="uploadDetails">
                  <div class="flex flexdc imagebox">
                    <span class="uploadDetails-title">许可证</span>
                    <el-image
                      v-loading="loading"
                      class="re-image"
                      lazy
                      element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(0, 0, 0, 0.8)"
                      :src="form.produceImage"
                    />
                  <!-- <uploadImg imgtype="produceLicensePicFile" :pic-url="produceLicensePicIdBase64" @sendImginfo="handleImginfo" /> -->
                  </div>
                </div>
                <div class="uploadDetails">
                  <div class="flex flexdc imagebox">
                    <span class="uploadDetails-title">扫描件</span>
                    <el-image
                      v-loading="loading"
                      class="re-image"
                      element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(0, 0, 0, 0.8)"
                      lazy
                      :src="form.maintainImage"
                    />
                  <!-- <uploadImg imgtype="maintainLicensePicFile" :pic-url="maintainLicensePicIdBase64" @sendImginfo="handleImginfo" /> -->
                  </div>
                </div>
              </div>
            </div>
            <div class="inputLable wd100 inputLable1 flex flexac">
              <span class="name texttr">许可证编号：</span>
              <el-input v-model="form.licenseCode" class="input" readonly />
            </div>
            <div class="inputLable wd100 inputLable1 flex flexac">
              <span class="name texttr">许可项目：</span>
              <div class="flex ">
                <el-input v-model="form.licenseProject" class="input" readonly />
                <!-- <div v-for="(item,index) in licenseProjectArr" :key="index" class="m-r-25">
                  <el-checkbox v-model="item.check" :checked="item.check">{{ item.name }}</el-checkbox>
                </div> -->
              </div>
            </div>
            <div class="inputLable wd100 inputLable1 flex flexac">
              <span class="name texttr">许可证发证机关：</span>
              <el-input v-model="form.licenseIssuingAuthority" class="input" readonly />
            </div>

            <div class="inputLable wd100 inputLable1 flex flexac">
              <span class="name texttr">许可证发证日期：</span>
              <el-input v-model="form.licenseIssuingDate" class="input" readonly />
            </div>

            <div class="inputLable wd100 inputLable1 flex flexac">
              <span class="name texttr">许可证有效期至：</span>
              <el-input v-model="form.licenseExpiryDate" class="input" readonly />
            </div>
          </div>
        </div>
        <div class="flex footer m-t-30 m-b-30">
          <el-button type="primary" class="btn el-icon-circle-check m-r-20" @click="handleSave">保 存</el-button>
          <el-button class="clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- <el-dialog v-if="choiceCoordinate" custom-class="coordinateWrap" :close-on-click-modal="false" :visible.sync="choiceCoordinate">
      <coordinate />
    </el-dialog> -->

  </div>
</template>

<script>

import { unitReview, unitNoReview } from '@/api/maintenance/unitfiling'

import { showNotice } from '@/utils/toolclass'
import storage from '@/utils/storage'

export default {
  components: {},
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    value: {
      type: Boolean
    }
  },
  data() {
    return {
      loading: true,
      reviewOpinions: '',
      approvalValue: '',
      getcoordinate: '',
      applyImage1: '',
      visible: false,
      options: [
        {
          value: '1',
          label: '通过'
        },
        {
          value: '2',
          label: '不通过'
        }
      ],
      param: {
        id: '',
        name: ''
      },
      form: { ...this.data },
      paging: {
        currentPage: 1,
        pageSize: 10
      },
      licenseProjectArr: [
        {
          id: 1,
          check: true,
          name: '生产'
        },
        {
          id: 1,
          check: false,
          name: '安装'
        },
        {
          id: 1,
          check: false,
          name: '改造'
        },
        {
          id: 1,
          check: false,
          name: '修理'
        }
      ]
    }
  },
  computed: {},
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    },
    data(v) {
      if (v.businImage !== undefined) {
        this.loading = false
      }
      if (v.applyImage !== undefined) {
        this.loading = false
      }
      if (v.produceImage !== undefined) {
        this.loading = false
      }
      if (v.maintainImage !== undefined) {
        this.loading = false
      }
      this.form = { ...v }
    }
  },
  created() {},
  mounted() { this.recordData = JSON.parse(storage.get('userInfo')) },
  methods: {
    handleSave() {
      // const params = {
      //   address: this.data.address, // 注册地址
      //   applyTemplateFileId: this.data.applyTemplateFileId, // 备案申请表模板文件ID
      //   auditState: parseInt(this.approvalValue), // 复核状态（0：待复核；1：已复核；）
      //   auditTime: formatDateTime().ymdhm, // 复核时间
      //   businessLicensePicId: this.data.businessLicensePicId, // 营业执照扫描件图片ID
      //   chargePerson: this.data.chargePerson, // 主要负责人
      //   crtDate: this.data.crtDate, // 提交时间
      //   id: this.data.id,
      //   introduce: this.data.introduce, // 介绍
      //   latitude: this.data.latitude, // 纬度
      //   licenseCode: this.data.licenseCode, // 许可证编号
      //   licenseExpiryDate: this.data.licenseExpiryDate, // 许可证有效期
      //   licenseIssuingAuthority: this.data.licenseIssuingAuthority, // 许可证发证机关
      //   licenseIssuingDate: this.data.licenseIssuingDate, // 许可证发证日期
      //   licenseProject: this.data.licenseProject, // 许可项目
      //   longitude: this.data.longitude, // 经度
      //   maintainLicensePicId: this.data.maintainLicensePicId, // 安装改造维修许可证图片ID
      //   name: this.data.name, // 单位备案名称
      //   officeAddress: this.data.officeAddress, // 办公地址
      //   orgId: this.data.orgId, // 机构ID
      //   produceLicensePicId: this.data.produceLicensePicId, // 特种设备生产许可证图片ID
      //   remark: this.reviewOpinions, // 备注
      //   rescuePhone: this.data.rescuePhone, // 应急救援电话
      //   reviewerId: this.recordData.userId, // 复核人ID
      //   socialCreditCode: this.data.socialCreditCode, // 统一社会信用代码
      //   version: this.data.version // 版本号
      // }
      if (!(/^\S+$/.test(this.approvalValue))) {
        showNotice('error', '提示', '请选择审核状态')
        return
      }
      if (this.approvalValue === '2') {
        if (!(/^\S+$/.test(this.reviewOpinions))) {
          showNotice('error', '提示', '请输入不通过的原因')
          return
        }
      }
      const params = {
        id: this.data.id,
        remark: this.reviewOpinions
      }
      // console.log(typeof this.approvalValue)
      if (this.approvalValue === '1') {
        this.handleReview(params)
      } else if (this.approvalValue === '2') {
        this.handleNoReview(params)
      }
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
      this.$emit('handleRefresh')
    },
    handleReview(data) {
      unitReview(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '保存失败')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    handleNoReview(data) {
      unitNoReview(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '拒绝成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '拒绝失败')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import "@/styles/addtable.scss";
@import "@/styles/public.scss";
.record-detail {
  .detail-container {
    margin-left: -300px;
    margin-bottom: 30px;
    margin-top: -130px;
    width: 1200px;
    background: #ffffff;
    .re-image {
      width: 150px;
      height: 150px;
      border: 1px solid #eeeeee;
      border-radius: 5px;
      padding: 10px;
    }
    .right-divider {
      display: table;
      width: 100%;
      line-height: 32px;
      background-color: #fff;
      white-space: nowrap;
      border-spacing: .2rem 0;
    }
    .right-divider:before,
    .right-divider:after {
      display: table-cell;
      content: '';
      width: 50%;
      background: -webkit-linear-gradient(#eee, #eee) repeat-x left center;
      background: linear-gradient(#eee, #eee) repeat-x left center;
      background-size: 1px 1px;
    }
    .el-textarea__inner {
      padding: 5px 0;
    }
    .footer {
      justify-content: center;
    }
    .inputLable .name {
      width: 140px;
      letter-spacing: 0px;
    }
    .con-content {
      margin: 20px 0 0 20px;
      .name {
        width: 140px;
        letter-spacing: 0px;
      }
      .co-detail {
        width: 334px;
      }
    }
    .btn {
      width: 100px;
      height: 40px;
    }
    .el-icon-location-outline:before {
      margin-right: 4px;
    }
    .locaBtn {
      height: 34px;
    }
    .panelWrap .title {
      padding-left: 30px;
    }
    h5 {
      font-size: 15px;
      background-color: #f5f5f5;
    }
    .conLeft {
      width: 50%;
      margin-right: 60px;
    }
    .conLeft,
    .conRight {
      padding-left: 1%;
      .inputLable {
        margin-top: 30px;
      }
      // .panelWrap .inputLable input {
      //   width: 60%;
      // }
    }

    .markinfo {
      width: 67.8%;
      border-width: 1px;
      border-color: var(--inputbc);
      border-radius: 3px;
      outline: none;
    }
    .divider {
      border-left: 1px solid #ccc;
    }
    .conRight {
      flex: 1;
      padding-left: 30px;
      .titleTip {
        padding: 16px 0;
        border-bottom: 1px solid #ddd;
        font-size: 15px;
      }
      font-size: 13px;
      margin: 20px 30px;
      .inputLable {
        margin-top: 20px;
        .name {
          text-align: left;
        }
      }
    }
    .uploadDetails-title {
      width: 270px;
      height: auto;
      margin: 15px 0 10px 0;
      // display: inline-block;
    }

    // .coordinateRead {
    //   width: 46%;
    // }

    .downTem {
      cursor: pointer;
      padding: 5px 9px;
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      border-radius: 3px;
      font-size: 12px;
      position: absolute;
      right: -144px;
      top: -8px;
    }

    .sanzhengImg {
      .uploadDetails-title {
        margin: 20px 0 10px 0;
      }
    }
  }
}
</style>
